<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="<%= basePath%>"/>

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript"
            src="jquery\bs_typeahead\bootstrap3-typeahead.min.js"></script>
    <script type="text/javascript">
        function searchActivity() {
            var name = $("#searchActivity").val()
            $.ajax({
                url: "workbench/activity/queryByLikeForDetail.do",
                type: "post",
                data: {
                    name: name
                },
                dataType: "json",
                success: function (activityList) {
                    var html = ""
                    $.each(activityList, function (i, activity) {
                        html += "<tr>"
                        html += "   <td><input type=\"radio\" name=\"activity\" activityId=\"" + activity.id + "\" value=\"" + activity.name + "\"/></td>"
                        html += "   <td>" + activity.name + "</td>"
                        html += "   <td>" + activity.startDate + "</td>"
                        html += "   <td>" + activity.endDate + "</td>"
                        html += "  <td>" + activity.owner + "</td>"
                        html += "</tr>"
                    })
                    $("#activityBody").html(html)
                }
            })
        }
        function init(){
            $("#edit-transactionOwner").val('${transaction.owner}')
            $("#edit-amountOfMoney").val('${transaction.money}')
            $("#edit-transactionName").val('${transaction.name}')
            $("#edit-expectedClosingDate").val('${transaction.expectedDate}')
            $("#edit-accountName").val('${transaction.customerId}')
            $("#edit-transactionStage").val('${transaction.stage}')
            $("#edit-transactionType").val('${transaction.type}')
            $("#edit-source").val('${transaction.source}')
            $("#edit-activitySrc").attr("activityId",'${transaction.activityId}')
            $("#edit-contactsName").attr("contactId",'${transaction.contactsId}')
            $("#edit-activitySrc").val('${transaction.activityName}')
            $("#edit-contactsName").val('${transaction.contactsName}')
            $("#edit-describe").val('${transaction.description}')
            $("#edit-contactSummary").val('${transaction.contactSummary}')
            $("#edit-nextContactTime").val('${transaction.nextContactTime}')
        }
        function searchContacts() {
            var name = $("#searchContact").val()
            $.ajax({
                url: "workbench/contacts/queryByLike.do",
                type: "post",
                data: {
                    name: name
                },
                dataType: "json",
                success: function (contactList) {
                    var html = ""
                    $.each(contactList, function (i, contact) {
                        html += "<tr>"
                        html += "    <td><input type=\"radio\" name=\"contact\" contactId=\"" + contact.id + "\" value=\"" + contact.fullname + "\"/></td>"
                        html += "   <td>" + contact.fullname + "</td>"
                        html += "   <td>" + contact.email + "</td>"
                        html += "   <td>" + contact.mphone + "</td>"
                        html += "</tr>"
                    })
                    $("#contactBody").html(html)
                }
            })
        }

        $(function () {
            //初始化工作
            init()
            //修改阶段
            $("#edit-transactionStage").change(function (){
                var value=this.value
                $.ajax({
                    url:"workbench/transaction/getOrderNo.do",
                    type:"post",
                    data:{
                        value:value
                    },
                    dataType:"json",
                    success:function (orderNo){
                        var oldOrderNo='${transaction.orderNo}'
                        if(orderNo<oldOrderNo){
                            alert("不能选择已经发生过的阶段！")
                            $("#edit-transactionStage").val('${transaction.stage}')
                            $("#edit-transactionStage").trigger("change")
                        }
                    }
                })
            })
            //选中市场活动
            $("#activityBody").on("click", "input[name='activity']", function () {
                var name = this.value
                var activityId = $(this).attr("activityId")
                $("#edit-activitySrc").val(name)
                $("#edit-activitySrc").attr("activityId", activityId)
                $("#findMarketActivity").modal("hide")
            })
            //选中联系人
            $("#contactBody").on("click", "input[name='contact']", function () {
                var name = this.value
                var contactId = $(this).attr("contactId")
                $("#edit-contactsName").val(name)
                $("#edit-contactsName").attr("contactId", contactId)
                $("#findContacts").modal("hide")
            })
            //点击市场活动源
            $("#activitySearchBtn").click(function () {
                searchActivity()
                $("#findMarketActivity").modal("show")
            })
            //市场活动搜索框键盘弹起
            $("#searchActivity").keyup(function () {
                searchActivity()
            })
            //点击联系人
            $("#contactSearchBtn").click(function () {
                searchContacts()
                $("#findContacts").modal("show")
            })
            //联系人搜索框键盘弹起
            $("#searchContact").keyup(function () {
                searchContacts()
            })

            //阶段框内容变化
            $("#edit-transactionStage").change(function () {
                var stage = $("#edit-transactionStage>option:checked").text()
                if (stage == "") {
                    $("#edit-possibility").val("")
                    return
                }
                $.ajax({
                    url: "workbench/transaction/getPossibilityByStage",
                    type: "post",
                    data: {
                        stage: stage
                    },
                    dataType: "json",
                    success: function (possibility) {
                        $("#edit-possibility").val(possibility)
                    }
                })
            })
            //客户名框自动补全功能
            $("#edit-accountName").typeahead({
                source: function (jquery, process) {
                    $.ajax({
                        url: "workbench/transaction/queryCustomerNameByLike.do",
                        type: "post",
                        data: {
                            name: jquery
                        },
                        dataType: "json",
                        success: function (nameList) {
                            process(nameList)
                        }
                    })
                }
            })
            //保存修改
            $("#saveEditBtn").click(function () {
                var id = '${transaction.id}'
                var oldStage='${transaction.stage}'
                var owner = $("#edit-transactionOwner").val()
                var money = $("#edit-amountOfMoney").val()
                var name = $("#edit-transactionName").val()
                var expectedDate = $("#edit-expectedClosingDate").val()
                var customerName = $("#edit-accountName").val()
                var stage = $("#edit-transactionStage").val()
                var type = $("#edit-transactionType").val()
                var source = $("#edit-source").val()
                var activityId = $("#edit-activitySrc").attr("activityId")
                var contactsId = $("#edit-contactsName").attr("contactId")
                var description = $("#edit-describe").val()
                var contactSummary = $("#edit-contactSummary").val()
                var nextContactTime = $("#edit-nextContactTime").val()
                $.ajax({
                    url: "workbench/transaction/saveEdit.do",
                    type: "post",
                    data: {
                        id: id,
                        owner: owner,
                        money: money,
                        name: name,
                        expectedDate: expectedDate,
                        customerName: customerName,
                        stage: stage,
                        type: type,
                        source: source,
                        activityId: activityId,
                        contactsId: contactsId,
                        description: description,
                        contactSummary: contactSummary,
                        nextContactTime: nextContactTime,
                        oldStage:oldStage
                    },
                    dataType: 'json',
                    success: function (data) {
                        alert(data.msg)
                        if (data.state == "1") {
                            window.location.href = "workbench/transaction/toIndex.do"
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
<!-- 查找市场活动 -->
<div class="modal fade" id="findMarketActivity" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">查找市场活动</h4>
            </div>
            <div class="modal-body">
                <div class="btn-group" style="position: relative; top: 18%; left: 8px;">
                    <form class="form-inline" role="form">
                        <div class="form-group has-feedback">
                            <input type="text" class="form-control" style="width: 300px;"
                                   placeholder="请输入市场活动名称，支持模糊查询" id="searchActivity">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </form>
                </div>
                <table id="activityTable3" class="table table-hover"
                       style="width: 900px; position: relative;top: 10px;">
                    <thead>
                    <tr style="color: #B3B3B3;">
                        <td></td>
                        <td>名称</td>
                        <td>开始日期</td>
                        <td>结束日期</td>
                        <td>所有者</td>
                    </tr>
                    </thead>
                    <tbody id="activityBody">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 查找联系人 -->
<div class="modal fade" id="findContacts" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">查找联系人</h4>
            </div>
            <div class="modal-body">
                <div class="btn-group" style="position: relative; top: 18%; left: 8px;">
                    <form class="form-inline" role="form">
                        <div class="form-group has-feedback">
                            <input type="text" class="form-control" style="width: 300px;" id="searchContact"
                                   placeholder="请输入联系人名称，支持模糊查询">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </form>
                </div>
                <table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
                    <thead>
                    <tr style="color: #B3B3B3;">
                        <td></td>
                        <td>名称</td>
                        <td>邮箱</td>
                        <td>手机</td>
                    </tr>
                    </thead>
                    <tbody id="contactBody">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<div style="position:  relative; left: 30px;">
    <h3>修改交易</h3>
    <div style="position: relative; top: -40px; left: 70%;">
        <button type="button" class="btn btn-primary" id="saveEditBtn">保存</button>
        <button type="button" class="btn btn-default">取消</button>
    </div>
    <hr style="position: relative; top: -40px;">
</div>
<form class="form-horizontal" role="form" style="position: relative; top: -30px;">
    <div class="form-group">
        <label for="edit-transactionOwner" class="col-sm-2 control-label">所有者<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="edit-transactionOwner" >
                <option></option>
                <c:forEach items="${userList}" var="user">
                    <option value="${user.id}">${user.name}</option>
                </c:forEach>
            </select>
        </div>
        <label for="edit-amountOfMoney" class="col-sm-2 control-label">金额</label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="edit-amountOfMoney" >
        </div>
    </div>

    <div class="form-group">
        <label for="edit-transactionName" class="col-sm-2 control-label">名称<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="edit-transactionName" >
        </div>
        <label for="edit-expectedClosingDate" class="col-sm-2 control-label">预计成交日期<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="date" class="form-control" id="edit-expectedClosingDate" >
        </div>
    </div>

    <div class="form-group">
        <label for="edit-accountName" class="col-sm-2 control-label">客户名称<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="edit-accountName" placeholder="支持自动补全，输入客户不存在则新建"
                   value="${transaction.customerId}">
        </div>
        <label for="edit-transactionStage" class="col-sm-2 control-label">阶段<span
                style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="edit-transactionStage" >
                <option></option>
                <c:forEach items="${stageList}" var="stage">
                    <option value="${stage.value}">${stage.value}</option>
                </c:forEach>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="edit-transactionType" class="col-sm-2 control-label">类型</label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="edit-transactionType" >
                <option></option>
                <c:forEach items="${typeList}" var="type">
                    <option value="${type.value}">${type.value}</option>
                </c:forEach>
            </select>
        </div>
        <label for="edit-possibility" class="col-sm-2 control-label">可能性(0-100)</label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="edit-possibility" readonly>
        </div>
    </div>

    <div class="form-group">
        <label for="edit-source" class="col-sm-2 control-label">来源</label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="edit-source" >
                <option></option>
                <c:forEach items="${sourceList}" var="source">
                    <option value="${source.value}">${source.value}</option>
                </c:forEach>
            </select>
        </div>
        <label for="edit-activitySrc" class="col-sm-2 control-label">市场活动源&nbsp;&nbsp;<a
                href="javascript:void(0);"><span
                class="glyphicon glyphicon-search" id="activitySearchBtn"></span></a></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" readonly id="edit-activitySrc"
                   activityId="" >
        </div>
    </div>

    <div class="form-group">
        <label for="edit-contactsName" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a
                href="javascript:void(0);"><span
                class="glyphicon glyphicon-search" id="contactSearchBtn"></span></a></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" readonly id="edit-contactsName"
                   contactId="" >
        </div>
    </div>

    <div class="form-group">
        <label for="edit-describe" class="col-sm-2 control-label">描述</label>
        <div class="col-sm-10" style="width: 70%;">
            <textarea class="form-control" rows="3" id="edit-describe"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label for="edit-contactSummary" class="col-sm-2 control-label">联系纪要</label>
        <div class="col-sm-10" style="width: 70%;">
            <textarea class="form-control" rows="3" id="edit-contactSummary"
                     ></textarea>
        </div>
    </div>

    <div class="form-group">
        <label for="edit-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="date" class="form-control" id="edit-nextContactTime" >
        </div>
    </div>

</form>
</body>
</html>